<template lang="">
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <!--  active-text-color 选中文字颜色 -->
        <!-- default-active 默认选中的菜单 -->
        <el-menu
          active-text-color="#12aa9c"
          background-color="#21373d"
          class="el-menu-vertical-demo"
          :default-active="$route.push"
          text-color="#fff"
        >
          <!-- 一级菜单 -->
          <el-menu-item index="logo"  @click="$router.push('/home')">
            <img src="@/assets/imgs/logo.png" alt="" class="logo" />
            <span>星克-管理系统</span>
          </el-menu-item>

          <el-menu-item index="/home" @click="$router.push('/home')">
            <el-icon><Histogram /></el-icon>
            <span>工作台</span>
          </el-menu-item>

          <!-- 剩余的菜单 需要根据更改的menuArr 去生成 -->
          <!-- el-sub-menu  -->

          <!-- 使用递归组件，传入 数据  -->
          <MyMenuItem :data="menuArr"></MyMenuItem>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;height:5vh">
          <div class="toolbar">
            <!-- 下拉菜单 -->
            <el-dropdown>
              <!-- 设置按钮 -->
              <el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon>
              <!-- 点击设置按钮 会弹出来的内容 -->
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人资料</el-dropdown-item>
                  <el-dropdown-item @click="exitHanlden">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <!-- 用户名 -->
            <span>{{drop_name}}</span>
          </div>
        </el-header >
        <h2>{{ $route.meta.title }}</h2>

        <el-main style="overflow: auto">
          <!-- 二级路由出口 -->
          <!-- <keep-alive>
            <router-view></router-view>
          </keep-alive> -->

          <router-view v-slot="{ Component }">
            <!-- router-view 通过 作用域插槽-对外暴漏了  router-view中正在显示的 组件 -->
            <!-- 再去使用keepalive 配置动态组件  -->
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </el-main>
        <!-- <el-footer>Footer</el-footer> -->
      </el-container>
    </el-container>
  </div>
</template>
<script>
import menuArr from "@/router/menu"

//  引入递归组件
import MyMenuItem from "@/components/MyMenuItem.vue"

export default {
  // 注册了
  components: { MyMenuItem },
  data() {
    return {
      menuArr:[],
      activeIndex: "/home",
      drop_name:""
    }
  },
  mounted() {
    //保存用户具有权限的菜单信息
    this.drop_name=localStorage.getItem("adminname")
    let newMenuArr = []
    let role = localStorage.getItem("role")
    let checkedkeys = JSON.parse(localStorage.getItem("checkedkeys"))

    menuArr.forEach((menu) => {
      //获取每一个菜单信息
      console.log(menu)
      //判断当前用户 所有这个菜单 权限，如果添加到 newMenuArr中
      if (role == 2) {
        //  如果是超管--能看到所有菜单，都添加进去
        newMenuArr.push(menu)
      } else {
        // debugger

        //不是超管，服务器返回了一个 权限 checkedkeys
        //遍历的menu.name 如果在 checkedkeys 里面  如果 在  添加进去newMenu中
        
        if (checkedkeys.includes(menu.name)) {
          // menu.name 如果在 checkedkeys 里面  如果 在  添加进去newMenu中
          newMenuArr.push(menu)
          if (menu.children) {
            //记录这个menu菜单  具有权限的孩子菜单

            let newChildren = []

            menu.children.forEach((secondMenu) => {
              //如果二级菜单 如果在权限数组中，就添加到 newChildren 厘米
              if (checkedkeys.includes(secondMenu.name)) {
                newChildren.push(secondMenu)
              } else {
              }
            })
            //到这里 子菜单也处理了
            // 把得到 最细拿到 有权限的孩子菜单 替换原来的  孩子菜单
            menu.children = newChildren
          }
        }
      }
    })

    console.log("具有权限的菜单", newMenuArr)
    this.menuArr = newMenuArr

    // //动态的添加路由信息
    // newMenuArr.forEach((v) => {
    //   this.$router.addRoute("layout", v)
    // })
  },

  beforeRouteEnter(to, from, next) {
    next((v) => {
      console.log(v)
    })
    console.log(to.meta)
    // console.log(this.$route)
  },
  methods: {
    exitHanlden(){
      this.$router.push("/login")
      localStorage.removeItem("role"),
      localStorage.removeItem("adminname"),
      localStorage.removeItem("token"),
      localStorage.removeItem("checkedkeys")
    },
    changeMenuActive() {
      console.log("layout 父级组件 ", this.$route.path)
      this.activeIndex = this.$route.path
    }
  },
  provide() {
    return {
      changeMenuActive: this.changeMenuActive
    }
  }
}
</script>
<style lang="css" scoped>
.el-header {
  position: relative;
}
.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.el-menu {
  height: 100vh;
}

.logo {
  width: 50px;
  height: 50px;
}
</style>
